<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <script src='./js/mapbox.js'></script>
    <link href='./css/mapbox.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZGFpd2oiLCJhIjoiY2txdDU5ajdxMWhvMjMxcWF1aDczYWhvZCJ9.gWuSwxwOtkpXOqjrSKcW3Q';
    var map = new mapboxgl.Map({
        container: 'map',
        zoom: 7,
        center: [112.1901249999999, 31.769817845138945],
        style: './data/style.json'
    });
    </script>
</body>
</html>